<template>
    <div id="create-edit-container">
        <!-- use the modal component, pass in the prop -->
        <Modal v-model="stateManager.editDialogVisible"
               :title="modalTitle"
               width="60%"
               @on-cancel="closeDialog"
               :styles="{top: '20px'}"
               :mask-closable="false">

            <i-form ref="model" :model="model" :rules="ruleValidate">
                <Row type="flex">
                    <i-col span="11">
                        <Form-item label="赛事代码" prop="code">
                            <i-input type="text" v-model="model.code" placeholder="请输入赛事代码"></i-input>
                        </Form-item>
                    </i-col>
                    <i-col span="11" offset="2">
                        <Form-item label="赛事名称" prop="name">
                            <i-input type="text" v-model="model.name" placeholder="请输入赛事名称"></i-input>
                        </Form-item>
                    </i-col>
                </Row>
                <Row type="flex">
                    <i-col span="6">
                        <Form-item label="开始时间" prop="began_at">
                            <Date-picker type="datetime" :editable="false" @on-change="changeBeganAt"
                                         placeholder="选择日期和时间" v-model="model.began_at" style="width: 100%"></Date-picker>
                        </Form-item>
                    </i-col>
                    <i-col span="6" offset="3">
                        <Form-item label="结束时间" prop="ended_at">
                            <Date-picker type="datetime" :editable="false" @on-change="changeEndedAt"
                                         placeholder="选择日期和时间" v-model="model.ended_at" style="width: 100%"></Date-picker>
                        </Form-item>
                    </i-col>
                    <i-col span="6" offset="3">
                        <Form-item label="最后可修改时间" prop="modified_before">
                            <Date-picker type="datetime" :editable="false" @on-change="changeModifiedBefore"
                                         placeholder="选择日期和时间" v-model="model.modified_before" style="width: 100%"></Date-picker>
                        </Form-item>
                    </i-col>
                </Row>
                <Row type="flex">
                    <i-col span="24">
                        <Form-item label="报名表标题" prop="entryFormTitle">
                            <i-input type="text" v-model="model.entryFormTitle" placeholder="请输入报名表标题"></i-input>
                        </Form-item>
                    </i-col>
                </Row>
                <Row type="flex">
                    <i-col span="24">
                        <Form-item label="报名表文字" prop="print_text">
                            <quill-editor v-model="model.print_text" style="margin-top: 38px"></quill-editor>
                        </Form-item>
                    </i-col>
                </Row>
            </i-form>

            <template slot="footer">
                <Row type="flex">
                    <i-col span="24">
                        <div class="pull-right">
                            <i-button type="ghost" @click="closeDialog">取消</i-button>
                            <i-button type="primary" @click="saveModel" :loading="isLoading">确定</i-button>
                        </div>
                    </i-col>
                </Row>
            </template>

        </Modal>

    </div>


</template>

<script>
    import QuillEditor from "vue-quill-editor/src/editor";
    export default {
        components: {QuillEditor},
        props: {
            stateManager: {
                type: Object
            }
        },
        data: function () {
            return {
                model: this.$modelDataSource({
                    url: 'api/award',
                    dataKey: 'model',
                    attributes: {
                        id: 0,
                        code: '',
                        name: '',
                        began_at: '',
                        ended_at: '',
                        modified_before: '',
                        entryFormTitle: '',
                        print_text: ''
                    }
                }),
                isLoading: false,
                ruleValidate: {
                    name: [
                        { required: true, message: '赛事名称不能为空', trigger: 'blur' }
                    ],
                    code: [
                        { required: true, message: '赛事代码不能为空', trigger: 'blur' }
                    ],
                    began_at: [
                        { required: true,  message: '请选择开始时间', trigger: 'change' }
                    ],
                    ended_at: [
                        { required: true, message: '请选择结束时间', trigger: 'change' }
                    ],
                    modified_before: [
                        { required: true, message: '请选择最后可修改时间', trigger: 'change' }
                    ],
                    entryFormTitle: [
                        { required: true, message: '报名表标题不能为空', trigger: 'blur' }
                    ],
                    print_text: [
                        { required: true, message: '请输入报名表文字', trigger: 'blur' },
                        { type: 'string', min: 20, message: '报名表文字不能少于20字', trigger: 'blur' }
                    ]
                }
            };
        },
        created: function () {
        },
        methods: {
            changeBeganAt: function (newTime) {
                if (this.model.began_at !== newTime){
                    this.model.began_at = newTime;
                }else{
                    this.model.began_at = '';
                }
            },
            changeEndedAt: function (newTime) {
                if (this.model.ended_at !== newTime){
                    this.model.ended_at = newTime;
                }else{
                    this.model.ended_at = '';
                }
            },
            changeModifiedBefore: function (newTime) {
                if (this.model.modified_before !== newTime){
                    this.model.modified_before = newTime;
                }else{
                    this.model.modified_before = '';
                }
            },
            closeDialog: function () {
                this.stateManager.editDialogVisible = false;
                this.model.reset();
                this.$refs['model'].resetFields();
                this.stateManager.editModelId = 0;
            },

            saveModel: function () {
                let self = this;
                self.$refs['model'].validate((valid) => {
                    if (valid){
                        console.log('表单验证通过');
                        self.isLoading = true;
                        self.model.save(function () {
                            self.isLoading = false;
                            self.$Notice.success({
                                title: '保存成功',
                                desc: self.model.name
                            });
                            self.closeDialog();
                            self.stateManager.refreshList = true;
                        }, function () {
                            console.log(self.model.errors);
                            self.isLoading = false;
                            _.forOwn(self.model.errors, function (value, key) {
                                if (value){
                                    self.$Notice.error({
                                        title: '保存失败',
                                        desc: value
                                    });
                                }
                            });
                        });
                    }else{
                        console.log('表单验证失败');
                    }
                })
            }
        },
        computed: {
            modalTitle: function () {
                if (this.model.id === 0){
                    return '添加赛事';
                }else{
                    return '修改赛事';
                }
            }
        },
        watch: {
            'stateManager.editModelId': function (newValue) {
                let self = this;
                this.model.fetch(newValue, function () {
                    self.stateManager.buttonLoading = false;
                    self.stateManager.editDialogVisible = true;
                }, function () {
                    self.stateManager.buttonLoading = false;
                    self.$Notice.error({
                        title: '数据加载超时',
                        desc: '请尝试刷新页面，并仔细检查网络链接状况或联系技术人员！'
                    });
                });
            }
        }
    }
</script>
